<template>
  <div class="nav-car">
    <el-carousel indicator-position="outside" height="500px">
      <el-carousel-item v-for="(item,index) in img_url" :key="index" style="width: 100%;height: auto;">
        <el-image :src="item" fit="fill" style="width: 100%;height: auto;"></el-image>
      </el-carousel-item>
    </el-carousel>
    <div class="nav-car-list">
      <div class="margin-x" v-for="(item,index) in img_url" :key="index">
        <el-image :src="item" style="max-width: 180px;" fit="fill"></el-image>
      </div>
    </div>
    <div class="nav-search">
      <div class="nav-search-main">
        <div style="opacity: 1;">
          <el-radio-group v-model="search_type">
            <el-radio :label="6">房型</el-radio>
            <el-radio :label="9">故事</el-radio>
            <el-radio :label="12">周边推荐</el-radio>
          </el-radio-group>
        </div>
        <div style="margin-top: 15px;opacity: 1;background-color: #FFFFFF;">
          <el-input placeholder="请输入内容" v-model="search_data" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        img_url: ["https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/v1.jfif",
          "https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/v2.jfif",
          "https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/v3.jfif",
          "https://sankuanstaticfiles.oss-cn-beijing.aliyuncs.com/plyue/bg/v4.jfif"
        ],
        search_type: 6,
        search_data: ""
      }
    },
    methods: {}
  }
</script>

<style>
  .nav-car {
    position: relative;

  }

  .nav-car-list {
    position: absolute;
    top: 100px;
    right: 100px;
    z-index: 99;
  }

  .nav-car-list el-image {
    margin: 1rem;
  }

  .nav-search {
    position: absolute;
    bottom: 100px;
    z-index: 9;
    width: 100%;
    text-align: center;
  }

  .nav-search div {
    text-align: left;
    opacity: 0.9;
  }

  .nav-search-main {
    width: 500px;
    display: inline-block;
    background-color: #000000;
    opacity: 0.6;
    padding: 1rem;
  }
</style>
